<template>
    <a-drawer
    destroyOnClose
        :title="title"
        :width="width"
        :open="show"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    ><slot></slot>
        <template #extra>
            <a-space>
                <a-button @click="onClose" :disabled="loading">{{ cancelText || $t("cancel") }}</a-button>
                <a-button type="primary" :loading="loading" @click="ok">{{ confirmText || $t("confirm") }}</a-button>
            </a-space>
        </template>
    </a-drawer>
</template>

<script lang='ts' setup>
    import { computed, ref } from "vue"
    const props = withDefaults(defineProps<{
        visible : boolean;
        width : number|string;
        title : string;
        cancelText? : string;
        confirmText? : string;
        confirm? : () => void;
    }>(), {
        width : 720
    })

    const emit = defineEmits<{
        (e : 'update:visible', visible : boolean) : void;
        (e : 'close') : void;
    }>()

    const v = ref(true)

    const loading = ref(false)
    const show = computed({
        get : () => props.visible,
        set : () => {
            close()
        }
    })

    function onClose() {
        if(!loading.value) {
            emit('close')
            emit('update:visible', false)
        }
    }

    async function ok() {
        if(props.confirm) {
            loading.value = true
            try {
                await props.confirm()
            } catch (error) {
            }
            loading.value = false
        }else {
            close()
        }
        
    }

    const modalWidth = computed(() => {
        return isNaN(props.width as number) ? props.width : props.width + 'px'
    })

</script>